<template>
    <view class="myActivities">
        <SRV-topbar title="我的订单" :isLeft="true"></SRV-topbar>
        <view class="nav">
            <view @click.stop="getsel(0,index)" :class="item.ischeck?'item sel':'item'" v-for="(item,index) in navList" :key="index">
                <text :class="item.ischeck?'down':'up'" v-if="index1==item.selIndex"
                    v-for="(item1,index1) in item.content" :key="index1">{{item1}}</text>
                <view v-if="item.ischeck" class="list">
                    <text @click.stop="getsel(1,index2,index)" :class="index2==item.selIndex?'sel':''"
                        style="font-weight: 400;" v-for="(item2,index2) in item.content" :key="index2">{{item2}}</text>
                </view>
            </view>
        </view>
        <view class="main">
            <view class="content" v-for="(item,index) in pageResult.list" :key="index"  v-if="pageResult.list.length > 0">
                <view class="top" @click="jump('order_view', item.id)">
                    <view class="merchant">
                        <view style="display: flex;">
                            <image :src="item.merchantInfo.logo" mode="widthFix"></image>{{item.merchantInfo.name}}
                        </view>
                        <view>{{item.order_type_name}}</view>
                    </view>
                    <view class="state">
                        <text>订单编号:{{item.order_sn}}</text>
                        <text>{{item.promotion_id == 5 && item.scrabbleInfo != '' ? item.scrabbleInfo : item.order_status_name}}</text>
                    </view>
                    <view class="item" v-for="(product,index2) in item.product_list" :key="index2">
                        <image :src="product.product_picture" mode="aspectFill" v-if="item.order_type != 4"></image>
                        <view class="right" :style="item.order_type == 4 ? 'width:99%;' : ''">
                            <text>{{product.product_name}}</text>
                            <text v-if="item.order_type != 4">{{product.sku_name}}</text>
                            <text v-if="item.order_type != 4">{{'￥'+product.price + ' X ' + product.num}}</text>
                            <text class="money">{{product.product_money}}</text>
                        </view>
                    </view>
                </view>
                <view class="bot">
                    <view class="bot_pic" @click="jump('order_view', item.id)">
                        <view>商品数量：{{item.product_count}}</view>
                        <view>合计：<text>￥{{item.total_money}}</text></view>
                        <view v-if="item.moneyList.product_money > 0">商品金额：<text>￥{{item.moneyList.product_money}}</text></view>
                        <view v-if="item.moneyList.shipping_money > 0">运费：<text>+￥{{item.moneyList.shipping_money}}</text></view>
                        <view v-if="item.moneyList.reduction_money > 0">减免金额：<text>-￥{{item.moneyList.reduction_money}}</text></view>
                        <view v-if="item.moneyList.coupon_money > 0">优惠券：<text>-￥{{item.moneyList.coupon_money}}</text>
                        </view>
                    </view>
                    <view class="bot_state">
                        <text v-for="(button,index3) in item.button_list" :key="index3" @click="operateFun(button.type, index)" class="sel">
                            {{button.name}}
                        </text>
                    </view>
                </view>
            </view>
            <view v-if="pageResult.list.length == 0" class="nocontent">
                <image src="https://hdsq.aoorange.cn/attachment/xcx/icon/noItem.png" mode="widthFix"></image>
                <text>暂未找到记录～</text>
            </view>
        </view>

        <uni-popup ref="popup" type="bottom">
            <scroll-view class="pay_type" scroll-y>
                <image @click="close()" class="close" src="https://hdsq.aoorange.cn/attachment/xcx/icon/close1.png"
                    mode="aspectFill"></image>
                <view class="title">选择支付方式</view>
                <view class="paypir">
                    <text>应付金额</text>
                    <text>￥{{payInfo.pay_money}}</text>
                </view>
                <view class="line2" v-if="payInfo.offset_achievement > 0">
                    <text>业绩抵扣金额</text>
                    <view style="color: #ff003f;font-size: 38rpx;">-￥{{payInfo.offset_achievement}}</view>
                </view>
                <view class="line2" v-if="payInfo.check_use_judge" @click="setUseOther(3)">
                    <text>使用品鉴金{{payInfo.use_judge}}抵扣金额￥{{payInfo.use_judge}}</text>
                    <view :class="payData.is_use_judge == 1 ?'check':'nocheck'"></view>
                </view>
                <view class="line2" v-if="payInfo.check_use_hdq" @click="setUseOther(1)">
                    <text>使用互动券{{payInfo.use_hdq}}抵扣金额￥{{payInfo.use_hdq}}</text>
                    <view :class="payData.is_use_hdq == 1 ?'check':'nocheck'"></view>
                </view>
                <view class="line2" v-if="payInfo.pay_money > 0" @click="selPayType(5)">
                    <text>余额支付 - 当前余额：{{payInfo.user_money}}</text>
                    <view :class="payData.payment_type == 5 ?'sel':'nosel'"
                        v-if="Number(payInfo.user_money) >= Number(payInfo.pay_money)"></view>
                    <text v-else @click="jump('online_recharge')">余额不足</text>
                </view>
                <view class="line2" v-if="payInfo.pay_money > 0" @click="selPayType(1)">
                    <text>在线微信支付</text>
                    <view :class="payData.payment_type == 1 ?'sel':'nosel'"></view>
                </view>
                <view :style="'height:' + bottomHeight + 'rpx;'" class="pay_bot" @click="subPay()">确认支付</view>
            </scroll-view>
        </uni-popup>
        <uni-popup ref="pickupCode">
            <view class="show pickupCode-box">
                <view class="title">提货码</view>
                <image class="img" :src="pickupItem.imgUrl"></image>
                <view class="pickupCode-t">{{pickupItem.code}}</view>
                <view class="btn" @click="close()">
                    <text>确认</text>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
    var _self;
    import serve from '../../static/request.js';
    import storage from '../../static/appkey.js';
    import common from '../../static/jump.js';
    import commonPay from '../../static/commonPay.js';
    import uniQrcode from '../../static/wxqrcode.js';

    export default {
        data() {
            return {
                pageParam: {
                    appkey: uni.getStorageSync('appkey'),
                    'access-token': uni.getStorageSync('access-token'),
                    type: 0,
                    status: 0,
                    timeType: 2,
                    page: 0,
                    pageSize: 10
                },
                pageResult: {
                    list: [],
                    isEmpty: false,
                    isEnd: false
                },
                navList: [
                    {
                        content: ["全部状态", "代付款", "待发货", "待签收", "待自提", "已完成"],
                        ischeck: false,
                        issel: false,
                        selIndex: 0
                    }, 
                    {
                        content: ["全部时间", "近一个月订单", "近三个月订单", "今年内订单", "上一年订单", "上一年以前订单"],
                        ischeck: false,
                        issel: false,
                        selIndex: 0
                    }, 
                    // {
                    //     content: ["全部订单", "配送订单", "自提订单", "买单订单"],
                    //     ischeck: false,
                    //     issel: false,
                    //     selIndex: 0
                    // }, 
                ],
                payData: {
                    appkey: uni.getStorageSync('appkey'),
                    'access-token': uni.getStorageSync('access-token'),
                    pay_type: '',
                    pay_id: 0,
                    is_use_hdq: 0,
                    is_use_judge: 0,
                    payment_type: 1,
                    jumpFile: '',
                },
                payMoney: 0,
                payInfo: {
                    total_money: 0,
                    pay_money: 0,
                    user_money: 0,
                    user_hdq: 0,
                    judge_cash: 0,
                    check_use_judge: false,
                    use_judge: 0,
                    check_use_hdq: false,
                    use_hdq: 0,
                    offset_achievement: 0,
                },
                pickupItem: {
                    imgUrl: '',
                    code: ''
                },
            }
        },
        methods: {
            getsel(type, index, index1) {
                if (type == 0) {
                    for (var i in _self.navList) {
                        if (index == i) {
                            _self.navList[i].issel = true;
                            _self.navList[i].ischeck = !_self.navList[i].ischeck;
                        } else {
                            _self.navList[i].issel = false;
                            _self.navList[i].ischeck = false
                        }
                    }
                } else {
                    _self.navList[index1].ischeck = false;
                    _self.navList[index1].selIndex = index;
                    index1 == 0 ? _self.pageParam.status = index : '';
                    index1 == 1 ? _self.pageParam.timeType = index : '';
                    index1 == 2 ? _self.pageParam.type = index : '';
                    _self.pageParam.page = 0;
                    _self.pageResult.list = [];
                    _self.loadList();
                }
            },
            loadList() {
                _self.pageParam.page++
                serve.request({
                    url: '/member/order/list',
                    data: _self.pageParam,
                    v: '/v3'
                }).then(res => {
                    if (res.data && res.data.length > 0) {
                        _self.pageResult.list = _self.pageResult.list.concat(res.data);
                    }
                    _self.pageResult.isEmpty = _self.pageResult.list.length == 0;
                    _self.pageResult.isEnd = res.data.length == 0;
                });
            },
            operateFun(operateType, key) {
                let operateItem = _self.pageResult.list[key];
                if (operateType == 'order_cancel') {
                    uni.showModal({
                        title: '提示',
                        content: '您确定取消该订单吗',
                        success: function(res) {
                            if (res.confirm) {
                                serve.request({
                                    url: '/member/order/cancel',
                                    data: {
                                        appkey: uni.getStorageSync('appkey'),
                                        'access-token': uni.getStorageSync('access-token'),
                                        id: operateItem.id,
                                    },
                                    v: '/v2'
                                }).then(res => {
                                    uni.showToast({
                                        title: res.message,
                                        icon: 'none'
                                    });
                                    if (res.code == 200) {
                                        if (_self.pageParam.status == 0 || _self.pageParam.status == 9) {
                                            _self.pageResult.list[key].order_status_name = "已取消";
                                            _self.pageResult.list[key].button_list = [];
                                        } else {
                                            _self.pageResult.list.splice(key, 1);
                                        }
                                        _self.$forceUpdate();
                                    }
                                });
                            }
                        }
                    });
                    return;
                } else if (operateType == 'order_pay') {
                    _self.jump('order_view', operateItem.id);
                    // _self.startPay(operateItem);
                } else if (operateType == 'tip_delivery') {
                    serve.request({
                        url: '/member/order/tip-delivery',
                        data: {
                            appkey: uni.getStorageSync('appkey'),
                            'access-token': uni.getStorageSync('access-token'),
                            id: operateItem.id,
                        },
                        v: '/v2'
                    }).then(res => {
                        uni.showToast({
                            title: res.message,
                            icon: 'none'
                        });
                        if (res.code == 200) {
                            _self.pageResult.list[key].button_list = [];
                            _self.$forceUpdate();
                        }
                    });
                } else if (operateType == 'shop_express') {

                } else if (operateType == 'task_delivery') {
                    uni.showModal({
                        title: '提示',
                        content: '您确定该订单已确定收货吗',
                        success: function(res) {
                            if (res.confirm) {
                                serve.request({
                                    url: '/member/order/take-delivery',
                                    data: {
                                        appkey: uni.getStorageSync('appkey'),
                                        'access-token': uni.getStorageSync('access-token'),
                                        id: operateItem.id,
                                    },
                                    v: '/v3'
                                }).then(res => {
                                    uni.showToast({
                                        title: res.message,
                                        icon: 'none'
                                    });
                                    if (res.code == 200) {
                                        if (_self.pageParam.status == 0 || _self.pageParam.status == 3) {
                                            _self.pageResult.list[key].order_status_name = "待完成";
                                            _self.pageResult.list[key].button_list = [];
                                        } else {
                                            _self.pageResult.list.splice(key, 1);
                                        }
                                        _self.$forceUpdate();
                                    }
                                });
                            }
                        }
                    });
                    return;
                } else if (operateType == 'show_pickup') {
                    _self.pickupItem.code = operateItem.pickup_code;
                    _self.pickupItem.imgUrl = uniQrcode.createQrCodeImg(operateItem.pickup_code, {
                        size: parseInt(100) //二维码大小  
                    });
                    _self.$refs.pickupCode.open();
                    return;
                } else if (operateType == 'sub_pickup') {
					uni.showModal({
					    title: '提示',
					    content: '您确定该订单已确定自提吗',
					    success: function(res) {
					        if (res.confirm) {
                                _self.finishFun('/member/order/sub-pickup', key, operateItem.id);
					        }
					    }
					});
					return;
                } else if (operateType == 'exchange_money') {
					uni.showModal({
					    title: '提示',
					    content: '您确定把该订单兑换成50元充值吗',
					    success: function(res) {
					        if (res.confirm) {
                                _self.finishFun('/member/order/exchange-money', key, operateItem.id);
					        }
					    }
					});
					return;
                } else if (operateType == 'task') {
					uni.showModal({
					    title: '提示',
					    content: '您确定把该订单提交任务吗',
					    success: function(res) {
					        if (res.confirm) {
					            _self.finishFun('/member/order/work-task', key, operateItem.id);
					        }
					    }
					});
					return;
				}
            },
            finishFun(funishUrl, operateKey, operateId) {
                serve.request({
                    url: funishUrl,
                    data: {
                        appkey: uni.getStorageSync('appkey'),
                        'access-token': uni.getStorageSync('access-token'),
                        id: operateId,
                    },
                    v: '/v3'
                }).then(res => {
                    uni.showToast({
                        title: res.message,
                        icon: 'none'
                    });
                    if (res.code == 200) {
                        if (_self.pageParam.status == 0 || _self.pageParam.status == 5 || _self.pageParam.status == 6) {
                            _self.pageResult.list[operateKey].order_status_name = "已完成";
                            _self.pageResult.list[operateKey].button_list = [];
                        } else {
                            _self.pageResult.list.splice(operateKey, 1);
                        }
                        _self.$forceUpdate();
                    }
                });
            },
            startPay(item) {
                serve.request({
                    url: '/member/account/index',
                    data: {
                        appkey: uni.getStorageSync('appkey'),
                        'access-token': uni.getStorageSync('access-token')
                    },
                    v: '/v2'
                }).then(res => {
                    _self.payInfo.user_money = res.data.list.user_money;
                    _self.payInfo.user_hdq = res.data.list.user_integral;
                    _self.payInfo.judge_cash = res.data.list.judge_cash;
                    _self.payInfo.total_money = item.total_money;
                    _self.payInfo.pay_money = item.total_money;
                    _self.payInfo.offset_achievement = item.offset_achievement;
                    _self.payMoney = item.total_money;
                    _self.payInfo.check_use_judge = item.payData.use_judge > 0 && _self.payInfo.judge_cash > 0 ? true : false;
                    _self.payInfo.check_use_hdq = item.payData.use_hdq > 0 && _self.payInfo.user_hdq > 0 ? true : false;
                    _self.payInfo.use_judge = _self.payInfo.judge_cash > item.payData.use_judge ? item.payData.use_judge : _self.payInfo.judge_cash;
                    _self.payInfo.use_hdq = _self.payInfo.user_hdq > item.payData.use_hdq ? item.payData.use_hdq : _self.payInfo.user_hdq;
                    _self.payData.pay_type = item.payData.pay_type;
                    _self.payData.pay_id = item.payData.pay_id;
                    _self.$refs.popup.open();
                });
            },
            close() {
                _self.$refs.popup.close();
                _self.$refs.pickupCode.close();
            },
            setUseOther(type) {
                if (type == 1) {
                    _self.payData.is_use_hdq = _self.payData.is_use_hdq == 1 ? 0 : 1;
                } else {
                    _self.payData.is_use_judge = _self.payData.is_use_judge == 1 ? 0 : 1;
                }
                var nowMoeny = JSON.parse(JSON.stringify(_self.payMoney));
                if (_self.payData.is_use_hdq) {
                    nowMoeny = Number(nowMoeny) - Number(_self.payInfo.use_hdq);
                }
                if (_self.payData.is_use_judge == 1) {
                    nowMoeny = Number(nowMoeny) - Number(_self.payInfo.use_judge);
                }
                _self.payInfo.pay_money = nowMoeny;
                _self.$forceUpdate();
            },
			selPayType(payType) {
				if (payType == 5 && Number(_self.payInfo.user_money) < Number(_self.payInfo.pay_money)) {
					return;
				}
				_self.payData.payment_type = payType;
			},
            subPay() {
                commonPay.payFun(_self.payData, '/pages/my/orderView?id=' + _self.payData.pay_id);
            },
            jump(jump_type, jump_link) {
                common.jump(jump_type, jump_link);
            }
        },
        onLoad(options) {
            _self = this;
            _self.pageParam.status = options.status || 0;
			if(_self.pageParam.status > 0) {
				_self.navList[0].selIndex = _self.pageParam.status;
			}
            _self.loadList();
        },
        onReachBottom() {
            if (_self.pageResult.isEnd || _self.pageResult.isEmpty) {
                return
            }
            _self.loadList();
        }
    }
</script>

<style scoped lang="scss">
    .myActivities {

        .nav {
            position: fixed;
            // top: 100upx;
            height: 100upx;
            background: #FFFFFF;
            z-index: 200;
            display: flex;
            align-items: center;
            width: 100%;
            top: 156rpx;
            border-bottom: 1rpx rgba(62, 58, 58, 0.8) solid;

            .down {
                position: relative;
            }

            .sel {
                font-weight: bold !important;
                opacity: 1 !important;
            }

            .up {
                position: relative;
            }

            .down::after {
                position: absolute;
                right: -35upx;
                top: 18upx;
                content: '';
                border: 1upx solid rgba(57, 72, 107, 1);
                border-width: 0 4upx 4upx 0;
                padding: 6upx;
                transform: rotate(-135deg);
                -webkit-transform: rotate(-135deg);
            }

            .up::after {
                position: absolute;
                right: -35upx;
                top: 10upx;
                content: '';
                border: 1upx solid rgba(57, 72, 107, 1);
                border-width: 0 4upx 4upx 0;
                padding: 6upx;
                transform: rotate(45deg);
                -webkit-transform: rotate(45deg);
            }

            .item {
                position: relative;
                height: 28upx;
                line-height: 28upx;
                width: 50%;
                text-align: center;
                opacity: 0.5;
                font-size: 28upx;
                border-right: 1upx rgba(60, 72, 104, 0.2) solid;

                .list {
                    display: flex;
                    flex-direction: column;
                    position: absolute;
                    z-index: 300;
                    width: 100%;
                    background: #FFFFFF;
                    top: 65upx;
                    border: 1upx rgba(204, 204, 204, 0.3) solid;

                    text {
                        height: 70upx;
                        line-height: 70upx;
                        width: 100%;
                        text-align: center;
                    }
                }
            }

            .item:last-child {
                border-right: none;
            }
        }

        .main {
            padding-top: 100upx;
            height: calc(100vh - 250upx);
            overflow-y: auto;

            .content {
                box-sizing: border-box;
                border-bottom: 10upx #87878A solid;

                .top {
                    box-sizing: border-box;
                    padding-left: 30upx;
                    border-bottom: 1upx #EBECF0 solid;

                    .merchant {
                        display: flex;
                        font-size: 36rpx;
                        height: 96rpx;
                        align-items: center;
                        justify-content: space-between;
                        color: rgba(0, 0, 0, 0.8);
                        padding-right: 30rpx;
                        box-sizing: border-box;
                        border-bottom: 1rpx rgba(204, 204, 204, 0.5) solid;

                        image {
                            width: 40rpx;
                            height: 35rpx;
                            margin-right: 10rpx;
                        }
                    }

                    .state {
                        display: flex;
                        font-size: 32upx;
                        height: 96upx;
                        align-items: center;
                        justify-content: space-between;
                        color: rgba(0, 0, 0, 0.8);
                        padding-right: 30upx;
                        box-sizing: border-box;
                        border-bottom: 1upx rgba(204, 204, 204, 0.5) solid;

                        text:last-child {
                            color: #FBCA3F;
                            // font-weight: bold;
                        }
                    }

                    .item {
                        display: flex;
                        align-items: center;
                        padding: 20upx 27upx 20upx 0upx;
                        box-sizing: border-box;

                        image {
                            width: 170upx;
                            height: 170upx;
                            margin-right: 16upx;
                            border-radius: 3%;
                        }

                        .right {
                            width: 510upx;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            font-size: 32upx;
                            position: relative;

                            text:nth-child(2) {
                                font-size: 30upx;
                            }

                            text:nth-child(3) {
                                color: #FFC600;
                            }

                            text:first-child {
                                display: -webkit-box;
                                -webkit-box-orient: vertical;
                                -webkit-line-clamp: 2;
                                overflow: hidden;
                            }

                            .money {
                                position: absolute;
                                bottom: 0upx;
                                right: 0upx;
                                font-size: 34rpx;
                                color: #ff0000;

                            }
                        }
                    }
                }

                .bot {
                    padding: 0 20upx;

                    .bot_pic {
                        padding: 30rpx 0rpx;
                        font-size: 32rpx;
                        width: 100%;
                        display: flex;
                        flex-direction: row;
                        flex-wrap: wrap;
                        align-items: center;

                        view {
                            width: 50%;

                            text {
                                color: #FBCA3F;
                            }
                        }

                        view:nth-child(2n) {
                            text-align: right;
                        }
                    }

                    .bot_state {
                        display: flex;
                        justify-content: flex-end;

                        text {
                            width: 200upx;
                            height: 68upx;
                            line-height: 68upx;
                            text-align: center;
                            background: rgba(255, 255, 255, 1);
                            border: 1upx solid rgba(251, 202, 63, 1);
                            border-radius: 34upx;
                            font-size: 34upx;
                            color: rgba(251, 202, 63, 1);
                            margin-left: 16upx;
                            margin-bottom: 40upx;
                        }

                        .sel {
                            background: rgba(251, 202, 63, 1);
                            color: #FFFFFF;
                        }
                    }
                }
            }
        }


        .pay_type {
            position: relative;
            width: 100%;
            background: #FFFFFF;
            padding-bottom: 140upx;
            height: 60vh;

            text {
                font-size: 42rpx;
            }

            .close {
                position: absolute;
                width: 23upx;
                height: 23upx;
                right: 40upx;
                top: 45upx;
            }

            .title {
                width: 100%;
                text-align: center;
                height: 100upx;
                line-height: 100upx;
                font-size: 36upx;
                border-bottom: 1upx rgba(251, 251, 253, 1) solid;
            }

            .paypir {
                display: flex;
                justify-content: center;
                flex-direction: column;
                align-items: center;
                // padding: 20upx 0upx 20upx;
                font-size: 28upx;

                text:last-child {
                    color: #FF5F60;
                    font-size: 50upx;
                    font-weight: bold;
                    margin-top: 10upx;
                }
            }

            .line2 {
                width: 100%;
                box-sizing: border-box;
                padding: 36upx;
                display: flex;
                justify-content: space-between;
                font-size: 28upx;
                color: #333333;
                border-bottom: 1upx rgba(251, 251, 253, 1) solid;

                .txt {
                    color: #999999;
                }

                .nosel {
                    width: 36upx;
                    height: 36upx;
                    border: 1upx solid rgba(60, 72, 104, 1);
                    border-radius: 50%;
                }

                .sel {
                    background-image: url(../../static/img/check.png);
                    background-repeat: no-repeat;
                    width: 40upx;
                    height: 40upx;
                    background-size: 100%;
                }
            }

            .pay_bot {
                width: 100%;
                position: fixed;
                left: 0;
                bottom: 0;
                height: 100upx;
                background: #FFBF0A;
                color: #fff;
                font-size: 32upx;
                line-height: 100upx;
                text-align: center;
                border-radius: 0;

                &::after {
                    border: none;
                }
            }
        }

        .nocheck {
            width: 36upx;
            height: 36upx;
            border: 1upx solid rgba(60, 72, 104, 1);
            border-radius: 20%;
        }

        .check {
            background: url(../../static/img/checkbox_check.png);
            background-repeat: no-repeat;
            width: 40upx;
            height: 40upx;
            background-size: 100%;
        }

        .pickupCode-box {
            width: 80vw;
            background: #fff;
            border-radius: 8rpx;

            .title {
                width: 100%;
                text-align: center;
                color: #333333;
                height: 100rpx;
                line-height: 100rpx;
                font-size: 36rpx;
            }

            .img {
                width: 480rpx;
                height: 48rrpx;
                position: relative;
                left: 50%;
                margin-left: -240rpx
            }

            .pickupCode-t {
                width: 100%;
                text-align: center;
                height: 60rpx;
                line-height: 60rpx;
                letter-spacing: 8rpx;
                font-size: 40rpx;
            }

            .btn {
                width: 100%;
                height: 100rpx;
                text-align: center;
                line-height: 100rpx;
                font-size: 32rpx;
                color: #333333;
            }
        }

        .nocontent {
            width: 100%;
            padding-top: 338upx;
            display: flex;
            flex-direction: column;
            align-items: center;

            image {
                width: 220upx;
                height: 124upx;
            }

            text {
                font-size: 28upx;
                color: rgba(204, 204, 204, 1);
                margin-top: 30upx;
            }
        }
    }
</style>
